<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="searchForm"
      :model="searchParams"
      :inline="true"
    >
      <el-row>
        <el-col :span="4">
          <el-form-item label="JobId" prop="id">
            <el-input
              v-model="searchParams.id"
              placeholder="请输入JobId"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="关联资源主键" prop="resourceId">
            <el-input
              v-model="searchParams.resourceId"
              placeholder="请输入关联资源主键"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="文件资源名称" prop="resourceName">
            <el-input
              v-model="searchParams.resourceName"
              placeholder="请输入文件资源名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="关联模板主键" prop="templateId">
            <el-input
              v-model="searchParams.templateId"
              placeholder="请输入关联模板主键"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="模板名称" prop="templateName">
            <el-input
              v-model="searchParams.templateName"
              placeholder="请输入模板名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-search"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="dataAnnotationList">
      <el-table-column width="60" label="JobID" align="center" prop="id" />
      <el-table-column
        label="文件资源名称"
        align="center"
        prop="resourceName"
        width="280"
      />
      <el-table-column label="资源Id" align="center" prop="resourceId" />
      <el-table-column label="模板Id" align="center" prop="templateId" />
      <!-- <el-table-column
        label="关联模板名称"
        align="center"
        prop="templateName"
        width="220"
      /> -->
      <el-table-column
        label="任务状态"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            class="status"
            size="mini"
            type="text"
            @click="handleStatus(scope.row)"
            >已审核</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="责任人" align="center" prop="person" />
      <el-table-column label="版本" align="center" prop="version" />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="center" prop="createBy" />
      <el-table-column
        label="更新时间"
        align="center"
        prop="updateTime"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.updateTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新人" align="center" prop="updateBy" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="searchParams.pageNum"
      :limit.sync="searchParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { queryDataAnnotationList } from '@/api/auditCompletion/auditCompletion'

export default {
  name: 'AuditCompletion',
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 模板资源表格数据
      dataAnnotationList: [],
      // 查询参数
      searchParams: {
        pageNum: 1,
        pageSize: 10,
        id: '',
        resourceId: '',
        templateId: '',
        resourceName: '',
        templateName: '',
        status: 4
      },
      // 表单参数
      form: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询待打标资源列表 */
    getList() {
      this.loading = true
      queryDataAnnotationList(this.searchParams)
        .then(response => {
          if (response.code === 200 && response.rows) {
            this.dataAnnotationList = response.rows
            this.total = response.total
          } else {
            this.$message.error(response.msg)
            this.dataAnnotationList = []
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.searchParams.pageNum = 1
      this.getList()
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('searchForm')
      this.handleQuery()
    },

    /** 进入详情页面 */
    handleStatus(row) {
      const rowId = row.id
      this.$router.push('/auditCompletion/completionDetail/' + rowId)
    }
  }
}
</script>
<style scoped lang="scss">
.status {
  // font-weight: 900;
  background-color: #23c6c8;
  color: #ffffff;
  border-radius: 10px;
  width: 50px !important;
}
::v-deep .el-form-item--medium .el-form-item__content {
  width: 160px;
}
</style>
